<template>
	<!-- 商品列表过滤组件 -->
	<view class="filter-sort-container">
		<!-- 综合/销量排序 -->
		<view class="sort-tabs">
			<u-row>
				<u-col span="5">
					<view key="default" class="sort-tab" @click="showSelect=true">
						<text>{{filterkey[currentSort] }}</text>
					</view>
				</u-col>
				<u-col span="5">
					<view key="sales" class="sort-tab" @click="handleSortChange()">
						<text>销量</text>
						<u-icon :name="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'" size="14"></u-icon>
					</view>
				</u-col>
				<u-col span="9">
				</u-col>
				<u-col span="5">
					<view class="sort-tab" @click="showFilterPopup = true">
						<text>筛选</text>
						<u-icon name="list" size="18"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>

		<!-- 过滤弹窗1 -->
		<u-popup :show="showSelect" mode="left" closeOnClickOverlay @close="showSelect = false"
			:custom-style="popupStyle">
			<view>
				<u-divider custom-style="margin: 1rpx;"></u-divider>
				<view style="font-size: 32rpx;padding: 15rpx;text-align: center;" @click="selectrange('default')"
					class="category-item" :class="{active: currentSort === 'default'}">综合</view>
				<u-divider custom-style="margin: 1rpx;"></u-divider>
				<view style="font-size: 32rpx;padding: 15rpx;text-align: center;" @click="selectrange('godown')"
					class="category-item" :class="{active: currentSort === 'godown'}">价格从高到低</view>
				<u-divider custom-style="margin: 1rpx;"></u-divider>
				<view style="font-size: 32rpx;padding: 15rpx;text-align: center;" @click="selectrange('goup')"
					class="category-item" :class="{active: currentSort === 'goup'}">价格从低到高</view>
				<u-divider custom-style="margin: 1rpx;"></u-divider>
			</view>
		</u-popup>

		<!-- 过滤弹窗2 -->
		<u-popup :show="showFilterPopup" mode="right" closeOnClickOverlay @close="showFilterPopup = false"
			:custom-style="popupStyle">
			<view class="filter-popup">
				<!-- 价格区间 -->
				<view class="filter-section">
					<view class="section-title">价格区间</view>
					<view class="price-range">
						<u-input v-model="priceRange[0]" placeholder="最低价" type="number" border="surround"
							clearable></u-input>
						<text class="separator">-</text>
						<u-input v-model="priceRange[1]" placeholder="最高价" type="number" border="surround"
							clearable></u-input>
					</view>
				</view>

				<!-- 商品分类 -->
				<view class="filter-section">
					<view class="section-title">商品分类</view>
					<view class="category-list">
						<view v-for="category in categories['clothtype']" :key="category.id" class="category-item"
							:class="{active: selectedCategory === category.id}" @click="selectedCategory = category.id">
							{{category.name}}
						</view>
					</view>
				</view>
				<!-- 适用性别 -->
				<view class="filter-section">
					<view class="section-title">适用性别</view>
					<view class="category-list">
						<view v-for="category in categories['sextype']" :key="category.id" class="category-item"
							:class="{active: selectedCategorysex === category.id}"
							@click="selectedCategorysex = category.id">
							{{category.name}}
						</view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<u-button type="default" shape="circle" customStyle="width:200rpx;height:80rpx;"
						@click="resetFilters">重置</u-button>
					<u-button type="error" shape="circle" customStyle="width:200rpx;height:80rpx;margin-left:20rpx;"
						@click="applyFilters">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				categories: {
					clothtype: [{
							id: '',
							name: '全部'
						},
						{
							id: 2,
							name: '上衣'
						},
						{
							id: 3,
							name: '裤子'
						},
						{
							id: 4,
							name: '鞋子'
						}
					],
					sextype: [{
							id: '',
							name: '全部'
						}, {
							id: 6,
							name: '通用'
						},
						{
							id: 7,
							name: '男'
						},
						{
							id: 8,
							name: '女'
						}
					]
				},
				popupStyle: {
					// #ifndef MP
					top: '80rpx', // 默认值
					// #endif
				},
				showSelect: false, //排序弹窗显示
				showFilterPopup: false, //过滤弹窗显示
				currentSort: 'default', // 当前排序方式
				sortOrder: 'desc', // 排序顺序 asc/desc
				priceRange: ['', ''], // 价格区间
				selectedCategory: '', // 选中的商品分类
				selectedCategorysex: '', // 选中的性别分类
				filterkey: {
					default: '综合',
					goup: '价格↑',
					godown: '价格↓',
				},
			}
		},
		methods: {
			emitdata() {
				this.$emit('filterwhere', {
					defaultsort: this.currentSort, //第一个排序
					sortOrder: this.sortOrder, //第二个排序
					pricerangebe: this.priceRange[0],
					pricerangeend: this.priceRange[1],
					goodstype: this.selectedCategory,
					sextype: this.selectedCategory,
				});
			},
			// 排序切换
			handleSortChange(sortType) {
				this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
				this.emitdata();
			},
			selectrange(type) {
				this.currentSort = type;
				this.showSelect = false;
				this.emitdata();
			},
			// 应用筛选
			applyFilters() {
				this.showFilterPopup = false;
				this.emitdata();
			},

			// 重置筛选
			resetFilters() {
				this.priceRange = ['', ''];
				this.selectedCategory = '';
				this.selectedCategorysex = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-sort-container {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.sort-tabs {
		display: flex;
		flex: 1;

		.sort-tab {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			padding: 10rpx;
			color: #286631;
			border-left: 1px solid #eaeaea;

			&.active {
				color: #e74c3c;
				font-weight: bold;
			}

			text {
				margin-right: 8rpx;
			}
		}
	}

	.filter-btn {
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #666;
		border-left: 1rpx solid #f5f5f5;

		text {
			margin-right: 8rpx;
		}
	}

	.filter-popup {
		display: flex;
		flex-direction: column;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.filter-section {
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.section-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.price-range {
				display: flex;
				align-items: center;
				width: 400rpx;

				::v-deep .u-input {
					flex: 1;
				}

				.separator {
					margin: 0 20rpx;
					color: #999;
				}
			}

			.category-list {
				display: flex;
				flex-wrap: wrap;

				.category-item {
					padding: 12rpx 24rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					background-color: #f7f7f7;
					border-radius: 8rpx;
					font-size: 26rpx;
					color: #333;

					&.active {
						background-color: #fef0f0;
						color: #e74c3c;
					}
				}
			}
		}

		.action-buttons {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			margin-top: auto;
		}
	}
</style>